import React, { Component } from 'react';
import { connect } from 'react-redux';
import { regist, clearMsg } from '../../redux/user.redux.js';
import { WhiteSpace, WingBlank, List, InputItem, Button, Radio } from 'antd-mobile';
import { USER_TYPE } from '../../common/constant';
import './User.less';
const RadioItem = Radio.RadioItem;

function mapStateToProp (state) {
	const { user } = state;
	return {
		msg: user.msg
	}
}

@connect(mapStateToProp,{ regist, clearMsg })
class Regist extends Component {
	constructor (props) {
		super(props);
		this.state = {
			username:'',
			pass:'',
			rpass:'',
			type: USER_TYPE.JOBHUNTER
		};
		this.onRegistHandler = this.onRegistHandler.bind(this);
	}
	
	onChangeHandler (key,value) {
		if(this.props.msg){
			this.props.clearMsg();
		}
		this.setState({
			...this.state,
			[key]:value,
		});
	}

	onRegistHandler () {
		const { username, pass, rpass, type } = this.state;
		this.props.regist({ user: username, pwd: pass, repwd: rpass, type });
	}
	
  render () {
		const { type } = this.state;
		const { msg } = this.props
    return (
      <WingBlank>
      	<h1 className="UserTitle" >Regist</h1>
				<WhiteSpace />
				{ msg&& <p className="errMsg">{msg}</p> }
				<List>
					<InputItem placeholder="请输入用户名" onChange={(v) => this.onChangeHandler('username',v)}>用户</InputItem>
					<InputItem placeholder="请输入密码" type="password" onChange={(v)=> this.onChangeHandler('pass',v)}>密码</InputItem>
          <InputItem placeholder="请输入确认密码" type="password" onChange={(v)=> this.onChangeHandler('rpass',v)}>确认密码</InputItem> 
				</List>
				<WhiteSpace />
				<List renderHeader={()=>"身份"}>
					<RadioItem checked={ type === USER_TYPE.JOBHUNTER } onChange={(v) => this.onChangeHandler('type',USER_TYPE.JOBHUNTER)}>牛人</RadioItem>
					<RadioItem checked={ type === USER_TYPE.BOSS } onChange={(v) => this.onChangeHandler('type', USER_TYPE.BOSS)}>老板</RadioItem>
				</List>
				<WhiteSpace />
				<Button type="primary" onClick={this.onRegistHandler}>注册</Button>
      </WingBlank>
    )
  }
}

export default Regist;